<template>
    <div class="container">
        <div class="exit">
            <Exit />
        </div>
        <div class="info">
            <el-card class="box1" header="个人信息">
                <div slot="header" class="clearfix">
                    <h1>个人信息</h1>
                </div>
                <div class="info_detail">
                    <div class="imgBox">
                        <div class="img_box">
                            <el-image class="img_ava" src="../../assets/cat2.jpg" fit="cover"/>
                            <div class="image-overlay">
                                <i class="el-icon-plus" style="color: white;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-yonghu"></i>
                            <span>用户名称</span>
                        </div>
                        <div class="right">
                            <span>张永固</span>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-shouji"></i>
                            <span>手机号码</span>
                        </div>
                        <div class="right">
                            <span>12222222222</span>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-logon_company"></i>
                            <span>公司名</span>
                        </div>
                        <div class="right">
                            <span>山西零点组科技有限公司</span>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-wodebumen-"></i>
                            <span>账号名</span>
                        </div>
                        <div class="right">
                            <span>lingdian@mdm.com</span>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-suoshujiaose"></i>
                            <span>所属角色</span>
                        </div>
                        <div class="right">
                            <span>管理员</span>
                        </div>
                    </div>
                    <div class="xx">
                        <div class="left">
                            <i class="iconfont icon-chuangjianriqi"></i>
                            <span>创建日期</span>
                        </div>
                        <div class="right">
                            <span>2024-2-2 14:33:22</span>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="box2">
                <div slot="header" class="clearfix">
                    <h1>基本资料</h1>
                </div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="修改基本资料" name="tab1">
                        <el-form :model="form" label-width="1.5rem" style="width: 40%;" size="small">
                            <el-form-item label="公司名">
                                <el-input v-model="form.user" placeholder="请输入公司名"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名称">
                                <el-input v-model="form.user" placeholder="请输入用户名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="cancel()">关闭</el-button>
                                <el-button type="primary" @click="save()">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="tab2">
                        <el-form :model="form" label-width="1.5rem" style="width: 40%;" size="small">
                            <el-form-item label="旧密码">
                                <el-input v-model="form.user" placeholder="请输入旧密码"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码">
                                <el-input v-model="form.user" placeholder="请输入新密码"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input v-model="form.user" placeholder="请确认密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="cancel()">关闭</el-button>
                                <el-button type="primary" @click="save()">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改二级密码" name="tab3">
                        <el-form :model="form" label-width="1.5rem" style="width: 40%;" size="small">
                            <el-form-item label="手机号">
                                <el-input v-model="form.user" placeholder="请输入手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <div style="display: flex;">
                                    <el-input v-model="form.user" placeholder="请输入验证码"></el-input>
                                    <el-button type="primary" style="margin-left: .25rem;">获取验证码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="二级密码">
                                <el-input v-model="form.user" placeholder="请输入二级密码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="cancel()">关闭</el-button>
                                <el-button type="primary" @click="save()">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改手机号" name="tab4">
                        <el-form :model="form" label-width="1.5rem" style="width: 40%;" size="small">
                            <el-form-item label="老手机号">
                                <el-input v-model="form.user" placeholder="请输入老手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <div style="display: flex;">
                                    <el-input v-model="form.user" placeholder="请输入验证码"></el-input>
                                    <el-button type="primary" style="margin-left: .25rem;">获取验证码</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="新手机号">
                                <el-input v-model="form.user" placeholder="请输入新手机号"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" @click="cancel()">关闭</el-button>
                                <el-button type="primary" @click="save()">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>
<script>
import Exit from '../components/Exit.vue';

export default {
    components: { Exit },
    data() {
        return {
            activeName: 'tab1',
            size: 'small',
            form: {

            }
        }
    },
    methods: {
        handleClick(e) {
            this.activeName = e.name
        },
        cancel() {

        },
        save() {

        }
    }
}
</script>
<style scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: #e6e8eb;
    display: flex;
    flex-direction: column;
    padding: 0 .25rem;
}

.exit {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
}

.info {
    display: flex;
    height: 80vh;
    padding: .25rem 0;
    /* padding: 0 .25rem ; */
}

.box1 {
    flex: 1;
    margin-right: .25rem;
    background-color: #ffffff;
}

.box2 {
    flex: 3;
    background-color: #fff;
}

.xx {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e8eaef;
    padding: .125rem 0;
}

.left .iconfont {
    margin-right: .125rem;
}

.info_detail:last-child {
    border-bottom: 1px solid #e8eaef;
}

.imgBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_box {
    height: 1.875rem;
    width: 1.875rem;
    display: flex;
    justify-content: center;
    margin-bottom: .5rem;
    position: relative;
}

.img_ava {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 覆盖层宽度和高度与图片相同 */
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 999;
}

.img_box:hover .image-overlay {
    opacity: 1;
}
</style>